<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的关注</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/boostrapFileInputResources/css/fileinput.min.css}">
    <script type="text/javascript" th:src="@{/pagesResource/ckplayer/ckplayer.js}" charset="utf-8"
            data-name="ckplayer"></script>
    <script src="/js/sweetAlert.js"></script>
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<br>
<br>
<br>
<div class="container" style="max-width: 1170px;">
    <div class="form-group" style="box-shadow: 10px 10px 5px #888;" th:if="${followTableInfoList}!= null">
        <h2>全部关注 -></h2>
        <br>
        <table class="table">
            <tbody>
            <tr class="row" style="height: 50px" th:each="followTableInfo:${followTableInfoList}">
                <td class="col-lg-1">
                    <img th:src="@{/images/userIcon/{userIc}(userIc=${followTableInfo.userIcon})}" style="height: 50px; width: 50px;border-radius: 50%;"
                         th:onclick="'followedUserMainPage(' + ${followTableInfo.followUserId} +')'">    <!-- 头像 -->
                </td>
                <td class="col-lg-9">
                    <th:block th:text="${followTableInfo.userName}"></th:block>
                    <br>
                    <br>
                    <th:block th:text="${followTableInfo.userSignature}"></th:block>
                    <br>
                </td>
                <td class="col-lg-2">
                    <br>
                    <button class="btn btn-primary btn-success" th:onclick="'cancleNotice(' + ${followTableInfo.followUserId} +')'">取消关注</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">

    /**
     * 取消关注
     */
    function cancleNotice(id) {
        swal({
            title: "确认弹框",
            text: "确定要取消关注吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "POST",
                        url: "/video/noticedUp",
                        async: false,    //异步请求
                        cache: true,
                        data: {
                            "followUserId": id
                        },
                        success: function (data) {
                            if(data["res"] == "sub") {  //取消关注成功
                                window.location.reload();
                            } else {
                                swal("Error", "取消关注失败！", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        } );
    }

    /**
     * 被关注者的主界面
     */
    function followedUserMainPage(followUserId) {
        window.location.href = "/user/userMainPage?userId=" + followUserId;
    }
</script>
</body>
</html>